<template>
    <div class="appcontainer">
        <div class="barcharts" style="width: 100%;height: 420px;" id="barcharts"></div>
    </div>
</template>

<script>
    export default {
        name: 'HospitalwebsiteSwbzwzydzl',
        props: {

        },
        data() {
            return {
                language: '',
                mycharts: null,
                start: 0,
                end: 100,
                xdata:[],
                data:[]
            };
        },
        created() {
            this.language = sessionStorage.getItem('language')
            window.addEventListener('setItem', this.languages);
            this.getData()
        },
        mounted() {

        },
        methods: {
            getData() {
                this.axios
                    .get('chronic/calculation/list/bar?dataLanguage='+this.language).then(res => {
                        this.xdata = []
                        this.data = []
                        if (res.data.code == 200) {
                            if (res.data.data && res.data.data.length != 0) {
                                res.data.data.map(item => {
                                    this.xdata.push(item.name)
                                    this.data.push(item.num)
                                })
                            }
                        }
                        this.$nextTick(() => {
                            this.drawbar(this.xdata, this.data)
                        })
                    })
            },
            drawbar(xdata, data) {
                var that = this
                that.myChart = that.$echarts.init(document.getElementById('barcharts'))
                let option = {
                    tooltip:{
                        trigger:'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                title:{
                                    zoom:that.language == 'zh' ? '区域缩放' : 'Region Zoom',
                                    back:that.language == 'zh' ? '区域缩放还原' : 'Region zoom restoration'
                                },
                                brushStyle:{
                                    color:'rgba(0,0,0,.4)',
                                }
                            },
                            myadd: {
                                show: true,
                                title: that.language == 'zh' ? '放大' : 'amplify',
                                icon: 'path://M643.389627 423.537124 454.696113 423.537124 454.696113 234.843609c0-9.516538-7.674628-17.191166-17.191166-17.191166s-17.191166 7.674628-17.191166 17.191166l0 188.693515L231.620266 423.537124c-9.516538 0-17.191166 7.674628-17.191166 17.191166s7.674628 17.191166 17.191166 17.191166l188.693515 0 0 188.693515c0 9.516538 7.674628 17.191166 17.191166 17.191166s17.191166-7.674628 17.191166-17.191166L454.696113 457.817128l188.693515 0c9.516538 0 17.191166-7.674628 17.191166-17.191166S652.803837 423.537124 643.389627 423.537124zM1015.762566 994.734086 758.7137 737.68522C830.855201 659.608674 874.958729 555.336065 874.958729 440.72829 874.958729 199.131008 679.102228 3.274508 437.504947 3.274508S0.051164 199.131008 0.051164 440.72829s195.8565 437.453782 437.453782 437.453782c114.607775 0 218.982712-44.103528 296.95693-116.245028l257.048866 257.048866c6.651344 6.651344 17.60048 6.651344 24.251824 0C1022.516239 1012.232237 1022.516239 1001.38543 1015.762566 994.734086zM437.504947 843.79974c-222.666533 0-403.173778-180.507245-403.173778-403.173778s180.507245-403.173778 403.173778-403.173778 403.173778 180.507245 403.173778 403.173778S660.17148 843.79974 437.504947 843.79974z',
                                onclick: function () {
                                    that.roamMap(0)
                                }
                            },
                            mysub: {
                                show: true,
                                title: that.language == 'zh' ? '缩小' : 'reduce',
                                icon: 'path://M823.41635 776.954627 672.262243 625.80052c37.762942-47.280432 58.333-105.511093 58.333-166.914251 0-71.637018-27.938437-138.975815-78.493704-189.63342-50.657605-50.657605-117.996402-78.493704-189.63342-78.493704s-138.975815 27.938437-189.63342 78.493704c-50.657605 50.657605-78.493704 117.996402-78.493704 189.63342s27.938437 138.975815 78.493704 189.63342c50.657605 50.657605 117.996402 78.493704 189.63342 78.493704 61.198481 0 119.122127-20.365381 166.30022-57.821307l151.256446 151.256446c6.037977 6.037977 13.815711 9.005797 21.695783 9.005797s15.760144-2.967819 21.695783-9.005797C835.389966 808.372576 835.389966 788.928243 823.41635 776.954627zM462.365781 681.882071c-123.010993 0-223.098141-100.087148-223.098141-223.098141s100.087148-223.098141 223.098141-223.098141 223.098141 100.087148 223.098141 223.098141S585.479113 681.882071 462.365781 681.882071zM561.838897 449.26644 367.395563 449.26644c-5.628623 0-10.23386 4.605237-10.23386 10.23386s4.605237 10.23386 10.23386 10.23386l194.443334 0c5.628623 0 10.23386-4.605237 10.23386-10.23386S567.467519 449.26644 561.838897 449.26644z',
                                onclick: function () {
                                    that.roamMap(1)
                                }
                            },
                            saveAsImage: {
                                title:that.language == 'zh' ? '保存图片' : 'Save Picture'
                            }
                        }
                    },
                    dataZoom: [{
                        type: "inside", //内置型数据区域缩放组件
                        start: this.start,
                        end: this.end,
                        minSpan: 0,
                        maxSpan: 100,
                        endValue: 10,
                        filterMode: 'filter',
                        zoomOnMouseWheel: false, // 关闭鼠标滚轮缩放
                        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
                        moveOnMouseMove: true // 开启鼠标移动窗口平移
                    }],
                    xAxis: {
                        type: 'category',
                        data: xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data,
                            type: 'bar',
                            // barWidth: 55,
                            itemStyle: {
                                color: '#0a79fd'
                            },
                        }
                    ]
                }
                that.myChart.setOption(option);
            },
            // 放大缩小
            roamMap(flag) {
                var that = this
                if (flag == 0) {
                    console.log(that.start,that.end,'++++++++++')
                    if(that.start == that.end){
                        return
                    }
                    that.start = that.start + 10
                    that.end = that.end - 10
                } else {
                    console.log(that.start,that.end,'----------')
                    if(that.start == 0){
                        return
                    }
                    that.start = that.start - 10
                    that.end = that.end + 10
                }
                that.drawbar(this.xdata,this.data)
            },
            // 监听session中language的变化
            languages(e) {
                console.log(e, 8888888888888)
                this.language = sessionStorage.getItem('language')
                console.log(this.language, 5555555555)
                this.getData()
            },
        },
        beforeDestroy() {
            if (this.myChart) {
                this.myChart.dispose()
                this.myChart = null
            }
            this.language = null
            window.removeEventListener('setItem', this.languages);
        },
    };
</script>
<style scoped>
    .appcontainer {
        width: 100%;
        background-color: #fff;
    }
</style>